<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                template="/template/plantilla.xhtml">
    <ui:define name="title"><h:outputText value="Sinetcom - Ingreso de Clientes"></h:outputText></ui:define>
    <ui:define name="menu"><ui:include src="/menu/menu.xhtml" /></ui:define>
    <ui:define name="content">
        <f:view contentType="text/html">
            <h:head/>       
            <h:body>
                <h:form id="verClientesForm">
                    <p:dataTable id="dtlClientes" rowKey="#{empresas.ruc}" var="empresas" value="#{ingresoClienteEmpresaBean.clientesEmpresa}" paginator="true" rows="15"
                                 selection="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado}" selectionMode="single" paginatorPosition="bottom"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}">

                        <f:facet name="header">
                            <h:outputText value="Clientes / Empresas"/>
                        </f:facet>
                        
                        <p:ajax event="rowSelect" immediate="true" update="btnEliminar, btnEditar"></p:ajax>
                        <p:ajax event="rowUnselect" immediate="true" update="btnEliminar, btnEditar"></p:ajax>
                        
                        <p:column exportable="false" width="10">
                            <p:rowToggler></p:rowToggler>
                        </p:column>
                        <p:column headerText="RUC" sortBy="#{empresas.ruc}" filterBy="#{empresas.ruc}">
                            <h:outputText value="#{empresas.ruc}"/>
                        </p:column>

                        <p:column headerText="Razón Social" sortBy="#{empresas.razonSocial}" filterBy="#{empresas.razonSocial}">
                            <h:outputText value="#{empresas.razonSocial}"/>
                        </p:column>

                        <p:column headerText="Nombre Comercial" sortBy="#{empresas.nombreComercial}" filterBy="#{empresas.nombreComercial}">
                            <h:outputText value="#{empresas.nombreComercial}"/>
                        </p:column>

                        <p:column headerText="Teléfono" sortBy="#{empresas.telefonoPBX}" filterBy="#{empresas.telefonoPBX}">
                            <h:outputText value="#{empresas.telefonoPBX}"/>
                        </p:column>

                        <p:rowExpansion>
                            <p:panelGrid style="width: 700px;" columns="2">
                                <f:facet name="header">
                                    <h:outputText value="Empresa: #{empresas.nombreComercial}"></h:outputText>
                                </f:facet>
                                <p:outputLabel for="contactos" value="Contactos: "></p:outputLabel>
                                <ui:repeat id="contactos" value="#{empresas.contactoList}" varStatus="index" var="contacto">
                                    <p:panelGrid columns="2">
                                        <f:facet name="header">
                                            <h:outputText value="Contacto ##{index.index + 1}"></h:outputText>
                                        </f:facet>
                                        <p:outputLabel for="nombre" value="Nombre: "></p:outputLabel>
                                        <h:outputText id="nombre" value="#{contacto.nombre}"></h:outputText>
                                        <p:outputLabel for="cargo" value="Cargo: "></p:outputLabel>
                                        <h:outputText id="cargo" value="#{contacto.cargo}"></h:outputText>
                                        <p:outputLabel for="telfijo" value="Teléfono Fijo: "></p:outputLabel>
                                        <h:outputText id="telfijo" value="#{contacto.telefonoFijo != null ? contacto.telefonoFijo : 'No disponible'}"></h:outputText>
                                        <p:outputLabel for="telmovil" value="Teléfono Móvil: "></p:outputLabel>
                                        <h:outputText id="telmovil" value="#{contacto.telefonoMovil != null ? contacto.telefonoMovil : 'No disponible'}"></h:outputText>
                                        <p:outputLabel for="email" value="E-mail: "></p:outputLabel>
                                        <h:outputText id="email" value="#{contacto.correoElectronico != null ? contacto.correoElectronico : 'No disponible'}"></h:outputText>
                                    </p:panelGrid>
                                </ui:repeat>
                                <p:outputLabel for="direcciones" value="Direcciones: "></p:outputLabel>
                                <ui:repeat id="direcciones" value="#{empresas.clienteDireccionList}" varStatus="index" var="direccion">
                                    <p:panelGrid columns="2">
                                        <f:facet name="header">
                                            <h:outputText value="Dirección ##{index.index + 1}"></h:outputText>
                                        </f:facet>
                                        <p:outputLabel for="direccion1" value="Dirección 1: "></p:outputLabel>
                                        <h:outputText id="direccion1" value="#{direccion.direccion1 != null ? direccion.direccion1 : 'No disponible'}"></h:outputText>
                                        <p:outputLabel for="direccion2" value="Dirección 2: "></p:outputLabel>
                                        <h:outputText id="direccion2" value="#{direccion.direccion2 != null ? direccion.direccion2 : 'No disponible'}"></h:outputText>
                                        <p:outputLabel for="ciudad" value="Ciudad: "></p:outputLabel>
                                        <h:outputText id="ciudad" value="#{direccion.ciudad.nombre }"></h:outputText>
                                    </p:panelGrid>
                                </ui:repeat>
                            </p:panelGrid>
                        </p:rowExpansion>
                        <f:facet name="footer">
                            <p:commandButton id="btnCrear" value="Crear" process="dtlClientes" actionListener="#{ingresoClienteEmpresaBean.definirClienteEmpresa}" update=":clienteEmpresaForm" onclick="PF('ingreso').show();" >
                                <f:attribute name="esNuevo" value="true"></f:attribute>
                            </p:commandButton>       
                            <p:commandButton id="btnEliminar" process="dtlClientes" value="Eliminar" action="#{ingresoClienteEmpresaBean.eliminarEmpresa()}" disabled="#{not(ingresoClienteEmpresaBean.clienteEmpresaSeleccionado != null)}" update=":verClientesForm:dtlClientes"/>                       
                            <p:commandButton id="btnEditar" process="dtlClientes" value="Editar" actionListener="#{ingresoClienteEmpresaBean.definirClienteEmpresa}" update=":clienteEmpresaForm" onclick="PF('ingreso').show();" disabled="#{not(ingresoClienteEmpresaBean.clienteEmpresaSeleccionado != null)}">
                                <f:attribute name="esNuevo" value="false"></f:attribute>
                            </p:commandButton>
                        </f:facet>
                    </p:dataTable>

                </h:form>

                <p:dialog header="Insertar / Editar Cliente Empresa" widgetVar="ingreso" modal="true">
                    <h:form id="clienteEmpresaForm">
                        <h:panelGrid columns="2" columnClasses="colum" cellpadding="5">

                            <p:outputLabel for="clienteEmpresaRuc" value="RUC:"/>
                            <p:inputText id="clienteEmpresaRuc" maxlength="15" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.ruc}" required="true"/>

                            <p:outputLabel for="clienteUsuarios" value="Usuario:"/>
                            <p:selectOneMenu id="clienteUsuarios" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.usuarioid}" converter="#{usuarioConverter}" required="true">
                                <f:selectItem itemLabel="Selecione..." itemValue=""/>                    
                                <f:selectItems value="#{ingresoClienteEmpresaBean.usuarios}" var="Usuarios" itemLabel="#{Usuarios.nombre} #{Usuarios.apellido}" itemValue="#{Usuarios.id.toString()}" />
                            </p:selectOneMenu>

                            <p:outputLabel for="clienteTipoEmpresa" value="Tipo Empresa:"/>
                            <p:selectOneMenu id="clienteTipoEmpresa" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.tipoEmpresaid}" converter="#{tipoEmpresaConverter}" required="true">
                                <f:selectItem itemLabel="Selecione..." itemValue=""/>                    
                                <f:selectItems value="#{ingresoClienteEmpresaBean.tiposEmpresa}" var="Tipos" itemLabel="#{Tipos.tipo}" itemValue="#{Tipos.id.toString()}" />
                            </p:selectOneMenu>

                            <p:outputLabel for="clienteRazonSocial" value="Razón Social:"/>
                            <p:inputText id="clienteRazonSocial" maxlength="60" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.razonSocial}" required="true"/>

                            <p:outputLabel for="clienteNombreComercial" value="Nombre Comercial:"/>
                            <p:inputText id="clienteNombreComercial" maxlength="60" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.nombreComercial}" required="true"/>

                            <p:outputLabel for="clientepbx" value="Telefono PBX:"/>
                            <p:inputText id="clientepbx" maxlength="15" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.telefonoPBX}" required="true"/>

                            <p:outputLabel for="clienteRepresentante" value="Representante Legal:"/>
                            <p:inputText id="clienteRepresentante" maxlength="30" value="#{ingresoClienteEmpresaBean.clienteEmpresaSeleccionado.nombreRepresentanteLegal}" required="true"/>

                            <p:commandButton id="btnGrabar" value="Grabar" action="#{ingresoClienteEmpresaBean.guardarEmpresa()}" onstart="statusDialog.show();" oncomplete="if (args &amp;&amp; !args.validationFailed){ PF('ingreso').hide();} statusDialog.hide();" update=":verClientesForm:dtlClientes">
                                <f:ajax execute="@all" render="@form"/>
                            </p:commandButton>

                        </h:panelGrid>
                    </h:form>
                </p:dialog>
            </h:body>
        </f:view>
    </ui:define>
</ui:composition>


